前言

在近几年期间，我经历了几次主要设计工具的变迁、切换，对这其中的变化也算是有些感悟了。从最开始的PS + 邮件的本地设计与半本地交付的对接模式，到后来Sketch + 蓝湖的本地设计与线上交付的对接模式，再到现在的 Figma + 摹客的全线上的设计交付模式。UI设计师们可以更加专注于自己的设计内容了，这对于我来说是一次从机械化到网络化的革命。

早先的设计与对接方式，受制于设备，系统，平台等多个方面的约束，基本上想要即时办公更新一个设计元素都得时时刻刻拎着自己的电脑，这对于某些常用iMac的高傲的设计师来说就是一场噩梦。

近两年来，UI设计工具的飞速发展让我也感受到了从本地化到在线化的一个不可逆的趋势，随着Figma在2017年的问世，设计工作All-in-One的工作模式即可被广大设计师接受与使用，而这个过程就像是电动牙刷一样，一旦用了就回不去了。

Figma作为一款相对较轻量的设计工具，帮我解决了从原型到设计的全部需求，但由于其国外软件的属性，虽说是做好了对接开发的全部功能，但在国内中小设计团队已被Sketch + 蓝湖统治的情况来看，想要做到无缝的切换，就需要找到一个更好的方案，刚好，摹客来了~

UI设计工具的更迭
既然提到了五花八门的设计工具，那我们就先来梳理一下：
我将它们大致分为：传统设计工具，新版设计工具以及云端设计工具。

传统设计工具
传统工具以独占设计界大半江山的Adobe公司出品的Ps和Ai为主，虽说这两个工具最初的核心功能是图片编辑和矢量图绘制，但随着功能的更新及产品的定位优化，这两款本地的设计工具也都具有了直接进行UI设计的优化功能，Ps更是在2015年推出了画板功能，意在将Ps打造成平面与界面的双料王者。

不过，一直以图片编辑为主的Ps毕竟是需要保证自己的核心功能，在大都以敏捷开发为主的互联网公司里其UI设计的缺陷就会被放大的非常明显：

内存空间占用极大

编辑内容以位图形式呈现，需要接受使用像素设计

针对界面的优化较少，缺少快捷功能

没有布局约束的概念

针对于UI的插件较少

对接交付需要提供源文件或是其它本地标注软件
……

从以上看，就单以UI的角度审视，Ps确实不是一个好的选择。不过，由于其本地化特征，还有对多平台系统的支持，在一些传统行业以及相对较为敏感的行业里，Ps也还保留着其UI设计的一席之地。

新版设计工具
这里所举的「新版」设计工具是相对于传统工具给的定义，UI设计工具层出不穷，基本上每年都会有新的产品问世。目前这类工具以Sketch，XD，InVision等为主，这些工具针对于UI工作进行了重新的构架，更适合我们从事界面相关工作的设计人群。

目前国内的大多数团队都是以这类软件为主要的设计工具，Mac搭配Sketch/XD，Win搭配XD的模式基本上是当前互联网公司设计团队的一个标准。

设计工作以它们为主，那么进行线上项目交接的时候蓝湖便是那个常规选项，将本地的设计稿进行云端上传，并保证切图标注的完美匹配，也是蓝湖这类软件的一个主要功能。

但这些对于当前的工作趋势来说，并不是一个特别好的解决方案。设计资料本地化，对接方式在线化并不能很好的解决即时办公和资源同步的问题，特别是在2020年疫情爆发后很长一段时间需要在家办公的场景，资料的同步性，设计沟通的实时性，交付对接的准确性便都成了一个刚需。

就在这时，一个在2012年就已经诞生的线上设计平台终于进入了大众的视野，它便是Figma。

云端设计工具
2020年伊始，Figma开始广泛地被各大自媒体平台提及。同时，设计师们的云端办公也开始变得火热，Figma的众多针对UI设计的功能和优化都已经被表扬过太多次：
强大的协同办公

快捷的自动布局

方便的组件管理

丰富的社区资源

即时的设计同步

可靠的版本回溯

……

这里就不多聊了，感兴趣的小伙伴可以找一下关于Figma的教程文章，还是很丰富的。不过可能是由于产品战略定位的关系，蓝湖一直没有做对接Figma的插件，在我苦于寻找更好地将Figma的设计稿进行线上对接的平台时，摹客它来了。

摹客和Figma的完美对接
为什么不直接使用Figma交付
可能有的小伙伴会问，使用Figma为什么不用它的检查（Inspect）功能进行直接交付呢？这个问题有三方面的原因：
1.Figma作为一个国外软件，若需要即时且体验顺畅的交付对接感受，Figma常常会让和你对接的开发同学头大。

2.Figma的交付功能还不够强大，代码组中的设计尺寸无法直接复制，而这一整串的参考代码开发同学大概率是不会直接使用的。

3.开发同学在从传统Sketch+蓝湖的交付方式转换成Figma的统一的交付方式时还是会有些不适应，首先全英文的界面汉化的话还要再多装一个插件，这几步操作就劝退了一个开发更改自己的习惯，而Figma上传设计稿到摹客，开发同学只用一个账号就可以无缝切换过去，基本没有别的适应成本。

综合以上几个原因，加上摹客作为国内的主流协作设计平台率先接入了Figma。因此摹客+ Figma变成了我们团队进行提升设计效率，优化协作模式和无缝应用于项目的首选。

摹客插件安装与使用
安装
摹客的Figma插件安装非常方便，我们只需在Figma的Community（社区）搜索Mockplus后点击Install（安装）即可，感兴趣的同学也可以在Creator（创建者） 这个tab找到摹客的官方账号进行关注。

使用
插件的使用也很方便，在Figma的画布中使用快捷键 cmd+/ 即可调出全局搜索，输入插件名称「mockplus」便能直接打开插件面板，或者是直接在画布空白处右击，选择Plugins > Mockplus 即可。

打开后记得选择中文版本，这样才能使用中国区的服务器。是的，摹客不只有针对国内用户的版本，在国外也设有服务器，啵~ Nice~

上传
完成登录后，即可选择在摹客中新建的项目集进行上传图稿

当然，想要给团队添加其他参考图片的话，摹客也支持从本地文件直接拖入，目前支持的格式有图片，压缩包和文件夹。

画板
上传完成之后，即可在摹客找到自己的设计稿。而摹客的设计稿画板有个特别舒服的小功能，每个设计稿在鼠标按住进行移动的时候，会有智能参考线将设计稿进行对齐，相较于蓝湖来说，这个对齐的小功能可太讨我喜欢了。

从设计角色到团队协作

摹客的功能模块
上面我们主要看了作为设计师在使用Figma+摹客进行项目交付的时候的一个常规流程，而摹客战略规划远不止这些，首先在兼容性上也支持Sketch、PS、XD、Axure等设计工具，另外还加入了RP在线设计，PRD文档撰写，设计规范管理，项目管理等实用功能，做到将设计流程的系统化。

设计稿板块
设计板块又分为评论、定稿、开发、交互、预览五个模块，分别对应了前期的设计评审，详细的标注、交付的前端对接、页面的交互状态、会议的演示交流等使用场景。

文档板块

摹客也同时支持在线的PRD文档的书写，由于是一整套功能板块，我们可以直接在写文档时插入已经上传的设计稿，这样即可实现文档和设计的同步链接。

RP设计板块

需要进行原型设计的同学也可以直接在摹客里进行操作，选择RP设计稿板块，即可选择需要设计的终端尺寸，然后开始设计原型稿。

进入之后，设计组件也是异常丰富，摹客基本上汇总了大厂设计组件库里面的全部组件模块，产品和交互同学可以直接从左侧的组件里找到需要的基本元素，那可真是太酷了~

完成后的RP稿可以直接同步到“RP设计稿”的板块当中。而原型稿中也同时支持Axure直接上传，或者客户端的MP文件。


工具的生态

摹客针对100人以下的团队一律免费，功能还几乎没有限制，而摹客的这一套生态的完整功能真的是让人十分心动。

目前Figma的免费版本可以创建一个团队项目，团队中可以添加3个文件资料，对于一个小的产品可以实现大部分的设计流程和交付了，配合上摹客的免费版本即可实现一个独立小团队的产品输出。

简单地梳理一下Figma和摹客的付费信息。

摹客还有个特别的协同功能，去年摹客正式接入了飞书，成为飞书首选的对接产品设计协作平台，若是有使用飞书进行项目沟通的同学，摹客的接入可以让你的团队更加高效。用户可以使用飞书账号登录摹客，也可以通过飞书的机器人功能直接进入摹客工作台或小程序。

摹客的一些优化功能
在使用摹客的过程中，我自己也有些小感受，有些小功能也是深得我心。

画板的智能参考线及吸附对齐
设计稿在移动的时候，会有智能参考线的提示，吸附的触感也更加明显，方便摹客中画布的整理

悬浮列表的图片浮窗显示
鼠标悬停在侧边栏后，右侧会自动出现这个页面的缩略图，使在画板中找设计稿时更加便捷

支持自定义画板背景色和逻辑线颜色
用户定制的选项更加丰富，在画布左下角点击设置便能选择颜色效果和交互效果

交互预览自带手机样机
在进行设计稿预览的时候，可以选择样机的显示样式，更加方便在电脑上的预览

结语
优秀的设计工具可以促使产品设计高效率、高质量地完成，作为设计+协作的一站式云平台，无论是与工具类产品相比，还是与平台类产品相比，摹客都拥有自己独特的优势。在这个云端办公的异常火爆的今天，Figma搭配摹客确实让我的工作效率极速起飞，感兴趣的同学可以去摹客官网下载相关插件或者是直接在Figma的社区里直接搜索mockplus安装。


本文原创，未经作者允许不可转载！
更多内容，欢迎关注作者微信公众号：应谋鬼计！